Understanding the :target Pseudo-Class in CSS
The :target pseudo-class in CSS represents an element whose id matches the fragment identifier (hash) in the current URL. It allows you to style elements when they are the target of a link.
:targetapplies styles only when the element's id matches the URL hash (e.g.,#section1).It is often used for highlighting sections, creating tabbed interfaces, or simple in-page navigation effects.
Only one element can be targeted at a time since a URL can have only one fragment identifier.
In this example, when you click a link pointing to #section1 or #section2, the corresponding section becomes the target and is highlighted using the :target pseudo-class.
Use
:targetto highlight or animate elements when navigated via fragment identifiers.Combine with transitions for smooth visual feedback.
Avoid relying solely on
:targetfor critical functionality, as the effect depends on the URL fragment.Test across browsers, as some older browsers may have limited support.